<template>
	<view class="">
		<uv-sticky bgColor="#fff">
			<uv-tabs
				:list="navList"
				@click="change"
				keyName="subjectName"
				:activeStyle="{
					color: '#fa7f26',
					transform: 'scale(1.05)'
				}"
				lineColor="#fa7f26"
			></uv-tabs>
		</uv-sticky>
		<!-- <uv-modal ref="modal" title="练习提醒" content='您当前有练习未完成,是否继续练习' @confirm="confirm" width="440rpx"
			:showCancelButton="true" @cancel="cancel"></uv-modal> -->
		<uv-popup ref="popup" :safeAreaInsetBottom="false" round="20">
			<view class="" style="padding-top: 20rpx; text-align: center; font-weight: 700">未完成练习</view>
			<scroll-view scroll-y="true" class="scrollPopup">
				<view class="box-list">
					<view class="list" v-for="item in testList">
						<view class="">
							<view class="title">{{ item.plugsPracticeSubject.subjectName }}</view>
							<view class="title1">{{ item.plugsPracticeQuestionBank.questionBankName }}</view>
							<view class="name">
								练习编号:
								<text>{{ item.testNo }}</text>
							</view>
							<view class="name">
								正确率:
								<text>{{ item.accuracy }}%</text>
							</view>
						</view>
						<view class="bott" style="" @click="goLinxi(item)">继续练习</view>
					</view>
				</view>
			</scroll-view>
		</uv-popup>
		<view class="content">
			<view v-if="list.length > 0" class="carousel-section">
				<uv-swiper :list="list" keyName="activityImgUrl" indicator indicatorMode="dot" circular></uv-swiper>
			</view>

			<view class="title" style="display: flex; align-items: center" v-if="bankList.length > 0">
				<view class="top">
					<view
						class=""
						style="
							width: 30rpx;
							height: 30rpx;
							border-radius: 15rpx;
							background-color: #fa7f26;
							display: flex;
							justify-content: center;
							align-items: center;
						"
					>
						<view
							class=""
							style="width: 15rpx; height: 15rpx; border-radius: 7.5rpx; background-color: #fff"
						></view>
					</view>
				</view>
				<text style="margin-left: 10rpx">章节测试</text>
			</view>
			<view class="box">
				<scroll-view scroll-x="true" class="scroll_view">
					<view class="scroll-view_H">
						<view class="box-con" v-for="(item, index) in bankList" :key="index" style="padding: 20rpx">
							<view class="left">
								<view class="name">{{ item.questionBankName }}</view>
								<view class="line"></view>
								<view class="txt">共{{ item.testQuestionsCount }}道题</view>
							</view>
							<view class="right" @click="btn(item)">开始练习</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="title" style="display: flex; align-items: center" v-if="paperList.length > 0">
				<view class="top">
					<view
						class=""
						style="
							width: 30rpx;
							height: 30rpx;
							border-radius: 15rpx;
							background-color: #fa7f26;
							display: flex;
							justify-content: center;
							align-items: center;
						"
					>
						<view
							class=""
							style="width: 15rpx; height: 15rpx; border-radius: 7.5rpx; background-color: #fff"
						></view>
					</view>
				</view>
				<text style="margin-left: 20rpx">历年真题</text>
			</view>

			<view class="box">
				<scroll-view scroll-x="true" class="scroll_view">
					<view class="scroll-view_H">
						<view class="box-con1" v-for="(item, index) in paperList" :key="index">
							<view
								class=""
								style="
									overflow: hidden;
									display: flex;
									align-items: center;
									flex-direction: column;
									justify-content: center;
								"
							>
								<view class="top">
									<view
										class=""
										style="
											width: 30rpx;
											height: 30rpx;
											border-radius: 15rpx;
											background-color: #fff;
											position: absolute;
											left: 45%;
											top: 60%;
											display: flex;
											justify-content: center;
											align-items: center;
										"
									>
										<view
											class=""
											style="
												width: 15rpx;
												height: 15rpx;
												border-radius: 7.5rpx;
												background-color: #fa7f26;
											"
										></view>
									</view>
								</view>
								<view class="name">{{ item.testPaperName }}</view>
								<view class="left">
									<view class="line">考试时长：{{ item.testMinute }}分钟</view>
									<view class="line">考试总分：{{ item.totalScore }}分</view>
									<view class="line">及格分数：{{ item.passingScore }}分</view>
								</view>
								<view class="right" @click="goexamination(item)">开始考试</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	userIsLogin,
	searchPlugsFormList,
	getHomeDataInfo,
	searchPlugsPracticeSubjectList,
	searchPlugsPracticeStudentById,
	checkPracticeStudentBindingState,
	getCommonPayInfoByDataId,
	getRecommen,
	createOrder,
	searchPlugsPracticeQuestionBankList,
	searchPlugsPracticeTestPaperList,
	insertPlugsPracticeStudentTestRecord,
	insertPlugsPracticeTestRecord,
	getPracticeTestQuestionsByquestionBankList,
	getPracticeStudentTestRecordList
} from '../../utils/api.js';
export default {
	data() {
		return {
			show: false,
			navList: [],
			list: [],
			dataId: 0,
			typeList: [],
			bankList: [],
			subjectList: [],
			paperList: [],
			testList: [],
			type: 0
		};
	},
	onLoad() {
		this.getNavlist();
	},
	onShow() {
		checkPracticeStudentBindingState().then((res) => {
			if (res.body) {
				if (res.body.enable == 1) {
					uni.switchTab({
						url: '/pages/index/index'
					});
					this.getlist();
				} else {
					clearInterval(this.timer);
					uni.showModal({
						title: '提示',
						content: '当前账号已被禁用',
						confirmColor: '#ee6666', //确定字体颜色
						showCancel: false, //没有取消按钮的弹框
						buttonText: '确定',
						success: function (res) {
							if (res.confirm) {
								uni.removeStorageSync('studentInfo');
								uni.removeStorageSync('__DC_STAT_UUID');
								uni.redirectTo({
									url: '/pages/login/login'
								});
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			} else {
				uni.removeStorageSync('studentInfo');
				uni.removeStorageSync('userInfo');
				uni.removeStorageSync('__ddminiUserOpenid');
				uni.removeStorageSync('__DC_STAT_UUID');
				uni.redirectTo({
					url: '/pages/login/login'
				});
			}
		});
	},
	methods: {
		cancel() {
			// this.$refs.modal.close();
		},
		confirm(e) {
			// this.$refs.modal.close();
			uni.navigateTo({
				url: '/pages/user/lianxiList/lianxiList'
			});
		},
		getTypeList() {
			let data = {
				userServiceToken: 'TUW8JF4WE6D52SDL5UMN5'
			};
			searchPlugsFormList(data).then((res) => {
				if (res.code == 200) {
					this.typeList = res.body.list;
				}
			});
		},
		getswiperList() {
			let data = {
				businessId: -1
			};
			getRecommen(data).then((res) => {
				if (res.code == 200) {
					this.list = [];
					res.body.forEach((item) => {
						if (item.associationId) {
							item.associationId = item.associationId.split(',').map(Number);
						}
					});
					res.body.forEach((item) => {
						if (item.associationId.indexOf(this.dataId) == -1) {
							console.log(789789);
							console.log(this.list);
						} else {
							this.list.push(item);
							console.log(this.list);
						}
					});
				}
			});
		},
		getHomeDataInfo() {
			let data = {
				userServiceToken: 'TUW8JF4WE6D52SDL5UMN5'
			};
			getHomeDataInfo(data).then((res) => {
				if (res.code == 200) {
					this.goodsList = res.body.jsonViewData[1].data;
				}
			});
		},

		change(item) {
			console.log(item);
			this.dataId = item.id;
			this.getBankList();
			this.getPaperList();
			this.getswiperList();
		},
		getNavlist() {
			console.log(163);
			userIsLogin().then((sult) => {
				if (sult.body.isLogin) {
					checkPracticeStudentBindingState().then((res) => {
						console.log('检查状态88888888');
						if (res.body) {
							uni.setStorage({
								key: 'studentInfo',
								data: res.body
							});
							let data = {
								id: res.body.id
							};
							searchPlugsPracticeStudentById(data).then((ress) => {
								this.navList = ress.body.practiceSubjectList;
								this.dataId = this.navList[0].id;
								this.getBankList();
								this.getPaperList();
								this.getswiperList();
								// this.getlist()
							});
						}
					});
				} else {
					uni.removeStorageSync('studentInfo');
					uni.removeStorageSync('userInfo');
					uni.removeStorageSync('__ddminiUserOpenid');
					uni.removeStorageSync('__DC_STAT_UUID');
					uni.redirectTo({
						url: '/pages/login/login'
					});
				}
			});
		},
		getlist() {
			let postdata = {
				page: 1,
				studentId: uni.getStorageSync('studentInfo').id,
				testStatus: 0
			};
			getPracticeStudentTestRecordList(postdata).then((res) => {
				if (res.code == 200) {
					this.testList = res.body.list;
					if (this.testList.length > 0) {
						this.$refs.popup.open('center');
					}
				}
			});
		},
		getBankList() {
			let data = {
				size: 50,
				page: 1,
				subjectId: this.dataId,
				userServiceToken: 'TUW8JF4WE6D52SDL5UMN5'
			};
			searchPlugsPracticeQuestionBankList(data).then((res) => {
				if (res.code == 200) {
					this.bankList = res.body.list;
					console.log(this.bankList, 123);
				}
			});
		},
		getPaperList() {
			let data = {
				size: 50,
				page: 1,
				subjectId: this.dataId,
				userServiceToken: 'TUW8JF4WE6D52SDL5UMN5'
			};
			searchPlugsPracticeTestPaperList(data).then((res) => {
				if (res.code == 200) {
					this.paperList = res.body.list;
				}
			});
		},

		btn(item) {
			console.log(item);

			let cont = '确定开始练习吗？';
			let content = cont.replace(/<br>/g, '\n');
			uni.showModal({
				title: '确定开始练习吗',

				cancelText: '取消练习',
				cancelColor: '#999',
				confirmText: '开始练习',
				success: (resp) => {
					console.log(resp);

					if (resp.confirm) {
						uni.navigateTo({
							url: `/pages/examinationList/examination/examination?info=${encodeURIComponent(
								JSON.stringify(item)
							)}&typeId=0`
						});
					} else if (resp.cancel) {
					}
				},
				fail: () => {}
			});
		},

		goexamination(item) {
			let that = this;

			let cont =
				'开放考试:选择答案后，立即出结果，不进行错题统计！<br>闭卷考试：模拟真实考试环境，需要交卷统计错题!';
			let content = cont.replace(/<br>/g, '\n');
			uni.showModal({
				title: '选择考试模式',
				content: content,
				cancelText: '开放考试',
				cancelColor: '#999',
				confirmText: '闭卷考试',
				success: (resp) => {
					console.log(resp);
					if (resp.confirm) {
						uni.navigateTo({
							url: `/pages/paperlist/details?info=${encodeURIComponent(JSON.stringify(item))}&typeId=1`
						});
					} else if (resp.cancel) {
						uni.navigateTo({
							url: `/pages/paperlist/details?info=${encodeURIComponent(JSON.stringify(item))}&typeId=0`
						});
					}
				},
				fail: () => {}
			});
		},

		getsubjectList() {
			let data = {
				page: 1,
				size: 10,
				adminId: uni.getStorageSync('userInfo').adminId || 47,
				userServiceToken: uni.getStorageSync('userInfo').userServiceToken || 'TUW8JF4WE6D52SDL5UMN5'
			};
			searchPlugsPracticeSubjectList(data).then((res) => {
				if (res.code == 200) {
					this.subjectList = res.body.list;
				}
			});
		},
		goLinxi(item) {
			uni.navigateTo({
				url: `/pages/user/lianxiList/lianxiReslut?dataId=${item.id}&accuracy=${item.accuracy}`
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}

.content {
	padding: 20rpx;
	box-sizing: border-box;

	.cate-section {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		background: #fff;

		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 26rpx;
			font-weight: 700;
			color: #333;
			width: 175rpx;
		}

		image {
			width: 100rpx;
			height: 100rpx;
			margin-bottom: 14rpx;
			border-radius: 20%;
			opacity: 0.7;
			box-shadow: 4rpx 4rpx 20rpx rgba(250, 67, 106, 0.3);
		}
	}

	.title {
		margin: 30rpx 0;
		font-weight: 700;
		color: #333;
		font-size: 32rpx;
	}

	.box {
		.scroll_view {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
		}

		.scroll-view_H {
			.box-con {
				display: inline-block;
				background-color: #fa7f26;
				margin-right: 30rpx;
				border-radius: 20rpx;
				width: 400rpx;

				.left {
					.name {
						font-weight: 700;
						font-size: 28rpx;
						color: #fff;
					}

					.line {
						width: 40rpx;
						height: 6rpx;
						border-radius: 3rpx;
						background-color: #fff;
						margin: 10rpx 0;
					}

					.txt {
						font-size: 22rpx;
						color: #fff;
					}
				}

				.right {
					width: 180rpx;
					height: 60rpx;
					background-color: #fff;
					border-radius: 5rpx;
					line-height: 60rpx;
					text-align: center;
					color: orange;
					margin-top: 20rpx;
					font-size: 26rpx;
					border-radius: 30rpx;
				}
			}

			.box-con1 {
				display: inline-block;
				background-color: #fff;
				margin-right: 50rpx;
				border-radius: 20rpx;
				width: 300rpx;
				height: 450rpx;

				.top {
					width: 300rpx;
					height: 120rpx;
					border-radius: 0 0 100% 100%;
					background-color: #fa7f26;
					position: absolute;
					top: -50rpx;
				}

				.name {
					margin-top: 100rpx;
					font-weight: 700;
					font-size: 30rpx;
					color: #000;
				}

				.left {
					font-size: 24rpx;

					.line {
						color: #333;
						margin: 5rpx 0;
					}

					.txt {
						font-size: 22rpx;
						color: #fff;
					}
				}

				.right {
					width: 180rpx;
					height: 60rpx;
					color: #fff;
					background-color: #fa7f26;
					border-radius: 5rpx;
					line-height: 60rpx;
					text-align: center;
					margin-top: 20rpx;
					font-size: 26rpx;
					border-radius: 30rpx;
				}
			}
		}
	}
}
.scrollPopup {
	width: 600rpx;
	min-height: 214rpx;
	max-height: 730rpx;
	.box-list {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		padding: 20rpx;
		box-sizing: border-box;
	}
}
.list {
	border: 1rpx solid #e8e8e8;
	background-color: #fff;
	margin-bottom: 20rpx;
	border-radius: 20rpx;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;
	.title {
		position: absolute;
		left: 0;
		top: 0;
		background-color: #fa7f26;
		color: #fff;
		font-weight: 700;
		font-size: 24rpx;
		padding: 10rpx 30rpx;
		border-radius: 0 0 20rpx 0;
	}

	.title1 {
		color: #000;
		font-weight: 700;
		font-size: 30rpx;
		margin-top: 50rpx;
	}
	.name {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		font-size: 24rpx;
		color: #666;
		text {
			margin-left: 5rpx;
		}
	}
	.bott {
		width: 150rpx;
		height: 60rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fa7f26;
		color: #fff;
	}
}
</style>
